<template>
  <div class="layout-container">
    <Table style="height:calc(100vh - 220px);" ref="table" v-model:page="page" :data="tableData"
           @getTableData="getTableData" @selection-change="handleSelectionChange">
      <el-table-column prop="operTime" label="操作时间" align="center" width="160"/>
      <el-table-column prop="equipment" label="设备" align="center" width="80"/>
      <el-table-column prop="browserType" label="浏览器" align="center" width="80"/>
      <el-table-column prop="remarks" label="操作内容" align="center"/>
      <el-table-column prop="remoteAddr" label="ip" align="center"/>
    </Table>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive} from "vue";
import Table from "@/components/table/index.vue";
import {Page} from "@/components/table/type";
import {getData} from "@/api/system/loginlog";

// 存储搜索用的数据
const query = reactive({
  input: "",
});
// 弹窗控制器

// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 15,
  total: 0,
});
const loading = ref(true);
const tableData = ref([]);
const chooseData = ref([]);
const handleSelectionChange = (val: []) => {
  chooseData.value = val;
};
// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: boolean) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    ...page,
    ...query,
  };
  getData(params)
      .then((res) => {
        let data = res.data.list;
        tableData.value = data;
        if (init) {
          page.total = Number(res.data.total);
        }
      })
      .catch((error) => {
        tableData.value = [];
        page.index = 1;
        page.total = 0;
      })
      .finally(() => {
        loading.value = false;
      });
};

getTableData(true)
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100%;
  margin: 0 0 0 10px;
}
</style>